<template>
  <div>
     <button @click="change($event,1987)">点击</button>
     <h1 ref="mybox">dom元素</h1>
     <h1 id="myids">1990年</h1>
  </div>
</template>
<script setup lang="ts">
  import {ref,computed,reactive,watch,nextTick} from 'vue'
  import $ from 'jquery'
  // ts 类型 的 模块化管理
  import {Icar,IProduct} from './tsfn'
let car=reactive<Icar>({
  name:'奔驰',
  color:"df"
})
let product=reactive<IProduct>({
    name:"李晓",
   age:18
})

   let a=ref<number>(1)
  // vue3 的计算属性的ts写法
  let adou=computed<number>(()=>a.value*2)
  
  // vue3 的watch的ts写法
  watch(a,(newVal:number,oldVal:number)=>{
    console.log(newVal,oldVal)
  })

  // ts的函数
  // ts的时间对象的 约束  Event
  let change=(e:Event,num:number)=>{
    console.log(num)
  }
  //  useRef 类似于ref 可以操作值
//  let myname=useRef("张三")
//  console.log(myname.value,"-----------")
//  标记dom元素
 let mybox=ref<HTMLElement|null>()
 nextTick(()=>{
  //ts  ? 表示 可能为空 可以为空 null undefined
  console.log(mybox.value?.innerHTML)
  // 原生js 想获取css样式
  let color=getComputedStyle((mybox.value as HTMLElement)).color
  console.log(color,"------------")
  //ts ！ 表示 肯定有值
  mybox.value!.innerHTML="改革开放"
  mybox.value!.style!.color="red";

  // ts的 Omit 继承原来的属性 但是可以排除一些属性
  interface IUser{
    name:string,
    age:number,
    price:number,
    sex:string
  }
  // 接口和type 都可以使用omit 排除一些属性
  interface Idou extends Omit<IUser,"sex"|"age">{
     height:number,
     weight:number
  }
  let wangyibo:Idou={
    name:"王一博",
    price:1000,
    height:180,
    weight:70
  }
 })
//  每一个人找一个后台管理系统 项目
   nextTick(()=>{
     console.log($("#myids").text(),"000000000")
   })
   
  // declare  声明一个变量Iyear 全局的接口
  let year=reactive<Iyear>({
    year:2022,
    age:28
  })

</script>